<template>
    <view class="load" v-if="!load">
        <u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
      </view>
    <view v-else>
        <view class="statusbox">
            <block v-if="reqData.Status == 0">
                <image class="st_img" src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720148356776732.png"></image>
                <view class="st_text">待同意</view>
            </block>
            <block v-else-if=" reqData.Status == 1">
                <image class="st_img" src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/17201489793021404.png"></image>
                <view class="st_text">已同意</view>
            </block>
            <block v-else-if=" reqData.Status == 3">
                <image class="st_img" src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/17201490543691428.png"></image>
                <view class="st_text">已完成</view>
            </block>
            <block v-else-if=" reqData.Status == -2">
                <image class="st_img" src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720149118549427.png"></image>
                <view class="st_text">已退款</view>
            </block>
            <block v-else-if=" reqData.Status == -1">
                <image class="st_img" src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1720149174330708.png"></image>
                <view class="st_text">已取消</view>
            </block>
            
        </view>
        <view class="title_1" v-if="reqData.Status == 0">请等待教练确认，如教练时间冲突拒绝，款项将原路退回</view>
        <view class="contentbox">
            <view class="title">预约信息</view>
            <view class="userbox">
                <image class="hdimg" :src="type == 1?userinfo.HeadImgUrl:teinfo.PhotoUrl" mode="aspectFill" @click.stop="type == 1?nav_to('/pages/user/user_visitor?id='+userinfo.UserID):nav_to('/pages/teacher/detail?id='+reqData.TecherID)"></image>
                <view class="rightbox">
                <view class="namebox">
                    <view class="name">{{type == 1?$util.entitiesToUtf16(userinfo.Name):$util.entitiesToUtf16(reqData.TecherName)}}</view>
                    <view class="level" 
                :class="{ 'level': teinfo.Level == '初级' || teinfo.Level == '中级' || teinfo.Level == '高级' || teinfo.Level == '助教', 'level2': teinfo.Level == '跟拍', 'level3': teinfo.Level == '网红' }" v-if="type !=-1">{{teinfo.Level}}</view>
                </view>
                <view class="r_name_2">
                    <view class="ratingbox" v-if="type !=-1">
                        <view class="rattext">评分：</view>
                        <block v-for="(value, index) in starRateView(teinfo.Score)" :key="index">
                            <image class="ratimg" :src="value"></image>
                        </block>
                    <!-- <image class="ratimg" src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1719814859207878.png"></image> -->
                    </view>
                    <view class="addrebox">
                    <image class="addreimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17152361921951044.png" mode="widthFix"></image>
                    <view v-if="type !=1" class="placed">{{teinfo.City || '未知'}}</view>
                    <view v-else class="placed">{{userinfo.City || '未知'}}</view>
                    </view>
                </view>
                </view>
            </view>
            <view class="group">
                <view class="left">运动项目</view>
                <view class="right">{{reqData.Item[0]?$util.entitiesToUtf16(reqData.Item[0].ProductName):''}}</view>
            </view>
            <view class="group">
                <view class="left">预约日期</view>
                <view class="right">{{getTime2(reqData.ServerTime)+(Today?'('+Today+')':'')}}</view>
            </view>
            <view class="group">
                <view class="left">服务时间</view>
                <view class="right">{{gettime(reqData.ServerTime)}}</view>
            </view>
            <view class="group">
                <view class="left">运动场地</view>
                <view class="right">{{reqData.Place || ''}}</view>
            </view>
            <view class="group">
                <view class="left">支付价格</view>
                <view class="fee_right">{{'￥'+reqData.Price}}</view>
            </view>
            <view class="group">
                <view class="left">备注</view>
                <view class="right">{{$util.entitiesToUtf16(reqData.Remark) || ''}}</view>
            </view>
        </view>
        <view class="adderbox">
            <view class="leftbox">
                <view class="name">{{reqData.Place || ''}}</view>
                <view class="addre">{{''}}</view>
            </view>
            <image class="map" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1715334367200304.png" mode="widthFix" @click="openMap"></image>
            <!-- <image v-if="shoplist.ServerPhone" class="call" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1715334377426145.png" mode="widthFix" @click="callNumber"></image> -->
        </view>
        <view class="status2box actBGBox" v-if="type != 1">
            <view class="CheckNumber">
                <view class="chetext">{{'票号 '+(reqData.ActionCode?reqData.ActionCode:'')}}</view>
                <!-- <view class="statustext">{{'待使用'}}</view> -->
            </view>
            <view class="codebox">
                <image class="codeimg" :src="reqData.QRImg" @click="lookimg(reqData.QRImg)"></image>
                <view class="codetext">请向发起人出示票码</view>
                <!-- <image v-if="reqData.Status ==2" class="Expire" src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/17229367574241280.png"></image> -->
            </view>
        </view>
        <view style="height: 240rpx;"></view>
        <view class="bottombox" v-if="type !=1">
            <view v-if="reqData.Status == 1" class="bo_btn" @click="Cancel">取消预约</view>
            <view v-if="reqData.Status == 2" class="bo_btn">进行中</view>
            <view v-else-if="reqData.Status == -1 || reqData.Status == -2" class="bo_btn" @click="redirect_to('/pages/teacher/detail?id='+teID)">重新预约</view>
            <view v-else-if="reqData.Status == 3" class="bo2_btn" @click="nav_to('/pages/teacher/user_review?id='+reqData.TecherID)">去评价</view>
        </view>
        <view class="bottombox" v-else>
            <block v-if="reqData.Status == 0">
                <view class="bo3_btn" @click.stop="OrderAudit(reqData.ID,-2)">拒绝</view>
                <view class="bo4_btn" @click="OrderAudit(reqData.ID,1)">同意</view>
            </block>
            <view v-if="reqData.Status == 1" class="bo_btn" @click="Cancel()">取消预约</view>
            <view v-if="reqData.Status == 2" class="bo_btn">进行中</view>
            <!-- <view v-else-if="reqData.Status == -1 || reqData.Status == -2" class="bo_btn" @click="redirect_to('/pages/teacher/detail?id='+teID)">重新预约</view> -->
            <view v-else-if="reqData.Status == 3" class="bo2_btn" @click="nav_to('/pages/teacher/detail?id='+reqData.TecherID)">查看评价</view>
        </view>
    </view>
</template>

<script>
export default {
components: {},
data() {
return {
    reqData:{},
    teID:'', //教练ID
    teinfo:{},
    re_ID:'', // 订单Id
    type:0,
    userinfo:{},
    Today:'',
    load:false,
};
},
onLoad(e){
    this.re_ID = e.id
    this.orderDetail()
    if(e.type){
        this.type = e.type
    }
    
},
methods: {
    lookimg(url){
        uni.previewImage({
        current:0,
        //这个是图片的数据，
        urls:[url]
        })
    },
    //教练同意和取消
    async OrderAudit(id,status){
      let _this = this
      let text = status == 1? '您确定要同意预约吗？':'您确定要拒绝预约吗？'
        uni.showModal({
            title: "温馨提示",
            content: text,
            confirmText: "确定",
            success: async function (res) {
                if (res.confirm) {
                    let res1 = await _this.$api.post('Technicians/OrderAudit',{
                        ID:id,
                        Status:status
                    })
                    if(res1.code == 0){
                        _this.orderDetail()
                    }
                } else if (res.cancel) {
                }
            },
        });
    },
    //取消预约
    async Cancel(){
        let _this = this
        uni.showModal({
            title: "温馨提示",
            content: "您确定要取消预约吗？",
            confirmText: "确定",
            success: async function (res) {
                if (res.confirm) {
                    let res1 = await _this.$api.post('Payment/Return',{
                        EventID:_this.re_ID,
                        EventType:'课程'
                    })
                    if(res1.code == 0){
                        _this.orderDetail()
                    }else{
                        _this.$pv.msg(res1.message)
                    }
                } else if (res.cancel) {
                }
            },
        });
    },
    //预约详情
    async orderDetail(){
        let res = await this.$api.post('ServerOrder/Detail',{
            ID:this.re_ID
        })
        console.log(res,'222222222');
        if(res.code == 0){
            this.reqData = res.data
            this.teID = res.data.TecherID
            this.teDetail()
            this.userde(res.data.UserID)
        }
    }, 
    //教练详情
    async teDetail(){
        let res = await this.$api.post('Technicians/Detail',{
            ID:this.teID
        })
        console.log(res,'33333333');
        if(res.code == 0){
            this.teinfo = res.data
            this.load = true
        }
    },
    //用户消息
    async userde(id){
        let res =await this.$api.post('User/GetUserInfo',{
            ID:id
        })
        if(res.code == 0){
            this.userinfo = res.data
        }
    }, 
    openMap(item) {
			uni.openLocation({
				latitude: this.reqData.Latitude,
				longitude: this.reqData.Longitude,
				success: function () {
				}
			});
		},
    getTime2(l) {
            let d = new Date(l);
            let timestamp = d.getTime();
            let nowtime = new Date()
            let nowday = nowtime.getTime()
            if(this.$util.unixDatetime(nowday, 'dd') == this.$util.unixDatetime(timestamp, 'dd')){
                this.Today = '今天'
            }
            return this.$util.unixDatetime(timestamp, 'year');
        },
    //时长
    gettime(l){
        let d = new Date(l);
        let timestamp = d.getTime();
        let start = this.$util.unixDatetime(timestamp, 'hh-mm');
        let endtime = (Number(start.slice(0,2))+this.reqData.Hours)+':00'
        if((Number(start.slice(0,2))+this.reqData.Hours)>24){
          endtime = '次日'+((Number(start.slice(0,2))+this.reqData.Hours)-24)+':00'
        }
        return start+'~'+endtime
    }
},
created() {

},
}
</script>
<style lang='scss'>
page{
    background-color: #f6f6f6;
}
.statusbox{
    display: flex;
    align-items: center;
    margin: 32rpx 0 16rpx 24rpx;
    .st_img{
        width: 48rpx;
        height: 48rpx;
    }
    .st_text{
        font-size: 36rpx;
        color: #333333;
        margin-left: 8rpx;
    }
}
.title_1{
    font-size: 24rpx;
    color: #666666;
    margin-left: 24rpx;
    margin-bottom: 32rpx;
}
.contentbox{
    width: 702rpx;
    // height: 640rpx;
    background: #FFFFFF;
    border-radius: 12rpx;
    margin: 0 auto;
    margin-bottom: 16rpx;
    padding: 32rpx;
    box-sizing: border-box;
    .title{
        font-size: 32rpx;
        font-weight: bold;
        color: #333333;
        margin-bottom: 32rpx;
    }
}
.userbox{
    display: flex;
    align-items: center;
    margin-bottom: 24rpx;
    .hdimg{
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      background-color: aqua;
    }
    .rightbox{
      margin-left: 24rpx;
      .namebox{
        display: flex;
        align-items: center;
        margin-bottom: 8rpx;
        .name{
          font-size: 36rpx;
          font-weight: bold;
          color: #333333;
          margin-right: 8rpx;
        }
        .level{
          width: 80rpx;
          // height: 32rpx;
          border-radius: 8rpx;
          background: linear-gradient(90deg, #EEC385 0%, #F8CE8A 100%);
          color: #5F4C36;
          text-align: center;
          font-size: 26rpx;
        }
        .level2 {
          width: 80rpx;
          // height: 32rpx;
          border-radius: 8rpx;
          background: linear-gradient(90deg, #FF5B67 0%, #FF5989 100%);
          color: #fff;
          text-align: center;
          font-size: 26rpx;
        }

        .level3 {
          width: 80rpx;
          // height: 32rpx;
          border-radius: 8rpx;
          background: linear-gradient(90deg, #FF951F 0%, #FF581D 100%);
          color: #fff;
          text-align: center;
          font-size: 26rpx;
        }
      }
      .r_name_2{
        display: flex;
        align-items: center;
        .ratingbox{
          display: flex;
          align-items: center;
          margin-right: 18rpx;
          .rattext{
            font-size: 24rpx;
            color: #666666;
          }
          .ratimg{
            width: 24rpx;
            height: 24rpx;
          }
        }
        .addrebox{
          display: flex;
          align-items: center;
          .addreimg{
            width: 32rpx;
            height: 32rpx;
          }
          .placed{
            color: #666666;
            font-size: 24rpx;
          }
        }
      }
    }
  }
  .group{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24rpx;
    .left{
        font-size: 28rpx;
        color: #999999;
        width: 150rpx;
    }
    .right{
        font-size: 28rpx;
        color: #333333;
        flex: 1;
        text-align: right;
    }
    .fee_right{
        font-size: 28rpx;
        color: #FC201C;
    }
  }

  .adderbox{
    width: 702rpx;
    height: 150rpx;
    border-radius: 12rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    background-color: #fff;
    padding: 32rpx;
    box-sizing: border-box;
    .leftbox{
        .name{
            font-size: 32rpx;
            font-weight: 600;
            color: #333333;
        }
        .addre{
            font-size: 24rpx;
            color: #999999;
        }   
    }
    .map{
        width: 56rpx;
        height: 56rpx;
        margin-right: 24rpx;
        margin-left: 106rpx;
    }
    .call{
        width: 56rpx;
        height: 56rpx;
    }
}
.bottombox{
    width: 100%;
    height: 196rpx;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-around;
    .bo_btn{
        width: 670rpx;
        height: 88rpx;
        border-radius: 44rpx;
        border: 2rpx solid #999999;
        text-align: center;
        line-height: 88rpx;
        color: #333333;
        font-size: 32rpx;
        margin: 20rpx auto;
    }
    .bo3_btn{
        width: 272rpx;
        height: 88rpx;
        border-radius: 44rpx;
        border: 2rpx solid #999999;
        text-align: center;
        line-height: 88rpx;
        color: #333333;
        font-size: 32rpx;
        margin: 20rpx 0;
    }
    .bo4_btn{
        width: 272rpx;
        height: 88rpx;
        border-radius: 44rpx;
        // border: 2rpx solid #999999;
        background-color: #706EEE;
        text-align: center;
        line-height: 88rpx;
        color: #fff;
        font-size: 32rpx;
        margin: 20rpx 0;
    }
    .bo2_btn{
        width: 670rpx;
        height: 88rpx;
        background: #706EEE;
        border-radius: 44rpx;
        text-align: center;
        line-height: 88rpx;
        color: #fff;
        font-size: 32rpx;
        margin: 20rpx auto;
    }
}
.actBGBox {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 32rpx;
		margin-bottom: 24rpx;
	}
.status2box{
    background-color: #fff;
    width: 702rpx;
    margin: 24rpx auto;
    .CheckNumber{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 30rpx;
        border-bottom: 1rpx solid #e4e4e4;
        .chetext{   
            font-size: 28rpx;
            color: #999999;
        }
        .statustext{
            font-size: 28rpx;
            color: #999999;
            margin-left: auto;
        }
    }
    .codebox{
        margin-top: 72rpx;
        text-align: center;
        position: relative;
        .codeimg{
            width: 248rpx;
            height: 248rpx;
            background-color: #333333;
        }
        .codetext{
            font-size: 24rpx;
            color: #999999;
            margin-top: 32rpx;
        }
        .Expire{
            width: 164rpx;
            height: 160rpx;
            position: absolute;
            top: 50rpx;
            left: 50%;
            transform: translateX(-50%);
        }
    }
    .codebtn{
        width: 296rpx;
        height: 72rpx;
        background: #706EEE;
        border-radius: 48rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        margin-top: 32rpx;
        color: #fff;
        font-size: 28rpx;
    }
    .codebtn2{
        width: 296rpx;
        height: 72rpx;
        background: #d7d7d7;
        border-radius: 48rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        margin-top: 32rpx;
        color: #fff;
        font-size: 28rpx;
    }
}
</style>